import React, { useEffect, useState } from "react";
import { NavBar, Space, Toast } from "antd-mobile";
import request from "../../api/request";
import { useNavigate, useSearchParams } from "react-router-dom";
import { CapsuleTabs } from "antd-mobile";
import style from "../list/index.module.css";
import { Selector } from "antd-mobile";
function Index() {
  const navigate = useNavigate();

  const back = () => navigate("/index");
  const [sp] = useSearchParams("");
  const start = sp.get("start");
  const end = sp.get("end");
  const [plane, setPlane] = useState([]);

  const Feachlist = async () => {
    const res = await request.get("/api/trip/airplane", {
      params: { start, end },
    });
    console.log(res);

    if (res.code === 200) {
      setPlane(res.data);
    }
  };

  useEffect(() => {
    Feachlist();
  }, []);

  const options = [
    {
      label: "选项一",
      value: "1",
    },
    {
      label: "选项二",
      value: "2",
    },
    {
      label: "选项三",
      value: "3",
    },
  ];



  return (
    <div>
      <div className={style.tap}>
        <NavBar onBack={back}>
          {start} → {end}
        </NavBar>
      </div>

      <CapsuleTabs>
        <CapsuleTabs.Tab title="火车" key="fruits">
          <div style={{marginBottom:'50px',marginTop:'20px'}}>
            {plane.length > 0 &&
              plane.map((item, ind) => (
                <div className={style.box} key={ind}>
                  <span>起点:{item.dasn}</span>
                  <span></span>
                  <span>终点:{item.sc}</span>
                  <span></span>

                  <span>发车时间:{item.dst}</span>
                  <span></span>
                  <span>到达时间:{item.ast}</span>
                  <span>￥{item.timespanNumber}</span>

                  <span>车次:{item.aat}</span>
                  <span></span>
                  <span>途经{item.cfis[0].ft}站</span>
                  <span></span>
                </div>
              ))}

           <div className={style.foot}>
             <Selector
              columns={3}
              options={options}
              // defaultValue={["2", "3"]}
              multiple
            />

           </div>

          </div>
        </CapsuleTabs.Tab>
        <CapsuleTabs.Tab title="中转" key="vegetables">
          西红柿
        </CapsuleTabs.Tab>
      </CapsuleTabs>
    </div>
  );
}

export default Index;
